<template>
  <div class="aduit-drawer" v-if="auditFlow && auditFlow.length" :class="[{ fold: fold }, auditStatus]">
    <div class="audit-bar" @click="onFoldChange" :title="fold ? '点击展开' : '点击收起'">
      <i class="el-icon-s-unfold"></i>
      <span>审批流程</span>
      <span v-if="fold" class="status">{{ auditStatus | statusDisplay }}</span>
    </div>
    <div class="steps">
      <audit-steps title="" :steps="auditFlow"></audit-steps>
    </div>
  </div>
</template>

<script>
import AuditSteps from './AuditSteps'
// import { AUDIT_STATUS } from '@utility/dict'
export default {
  name: 'AuditDrawer',
  components: { AuditSteps },
  props: {
    auditFlow: {
      type: Array,
    },
  },
  data() {
    return {
      fold: true,
    }
  },
  computed: {
    auditStatus() {
      if (this.auditFlow && this.auditFlow.length) {
        const lastStep = this.auditFlow[this.auditFlow.length - 1]
        // console.log('%c⧭', 'color: #7f2200', lastStep)
        // if (lastStep.status === AUDIT_STATUS.init) {
        //   const preStep = this.auditFlow[this.auditFlow.length - 2]
        //   if (preStep) {
        //     if (preStep.passed) {
        //       return 'approved'
        //     } else {
        //       return 'rejected'
        //     }
        //   }
        // } else
        if (lastStep.operated) {
          if (lastStep.passed) {
            return 'approved'
          } else {
            return 'rejected'
          }
        }
      }
      return 'auditing'
    },
  },
  filters: {
    statusDisplay(key) {
      switch (key) {
        case 'approved':
          return '已通过'
        case 'rejected':
          return '未通过'
        case 'auditing':
          return '审批中'
      }
    },
  },
  watch: {},
  created() {},
  mounted() {},
  methods: {
    onFoldChange() {
      this.fold = !this.fold
      this.$emit('fold-change', this.fold)
    },
  },
}
</script>
<style lang="scss" scoped>
.aduit-drawer {
  position: absolute;
  right: 2px;
  top: 5px;
  bottom: 25px;
  z-index: 20;
  display: flex;
  flex-direction: column;
  border: 1px solid #2672ff;
  box-shadow: -2px 4px 8px 2px rgba(116, 116, 116, 0.22);

  &.approved {
    border: 1px solid #67c23a;
    .audit-bar {
      background: #67c23a;
    }
  }

  &.rejected {
    border: 1px solid #f56c6c;
    .audit-bar {
      background: #f56c6c;
    }
  }

  &.fold {
    border: none;
    box-shadow: none;
    .audit-bar {
      width: 40px;
      text-align: center;
      box-shadow: -2px 4px 8px 2px rgba(116, 116, 116, 0.22);
      writing-mode: vertical-rl;
      i {
        margin: 0;
        transform: rotate(180deg);
        margin-bottom: 5px;
      }
    }
    .steps {
      display: none;
    }
  }

  .audit-bar {
    width: 260px;
    padding: 5px 10px;
    text-align: left;
    background: #2672ff;
    color: #fff;
    cursor: pointer;
    border-bottom: 1px solid #ccc;
    i {
      font-size: 22px;
      margin-right: 10px;
      transition: 0.3s;
      line-height: 22px;
      vertical-align: middle;
    }
    span {
      display: inline-block;
      font-size: 16px;
      line-height: 22px;
      vertical-align: middle;
      letter-spacing: 4px;
    }
    .status {
      &::before {
        display: inline-block;
        content: '·';
        margin: 5px 0;
      }
    }
  }
  .steps {
    flex: 1;
    background: #fff;
    overflow: hidden;
    width: 260px;
  }
}
</style>
